<template>
	<view style="background-color:#181816 ;height: 100%;">
		<view class="big_logo">
			<image src="../../static/big_logo.png"></image>
		</view>
		
		<view class="login_btn">
			<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">微信授权登录</button>
		</view>
		<view class="agreement">
			<radio-group @change="onAgree" style="display: inline;">
				  <label class="radio">
				    <radio value="1" :checked="checked" @tap="Checked()"></radio>
				  </label>
			  </radio-group>  
			我已阅读并同意
			<text @tap="userAgreement()">《用户协议》</text>
			和
			<text @tap="privacyAgreement()">《隐私保护指引》</text>
		</view>
		<u-popup
		  :show="show"
		  :round="20"
		  @close="close"
		  mode="center"
		  bgColor="transparent"
		  :safeAreaInsetBottom="false"
		  closeOnClickOverlay="true"
		>
		  <view
		    class="edit_name"
		    style="
		      width: 600rpx;
		      margin: auto;
		      background-color: #242424;
		      color: #fff;
		      border-radius: 20rpx;
		    "
		  >
		    <view class="used_name">根据用户信息隐私相关规定，需要你授权使用手机号查看藏品</view>
		    <view class="btn" style="display: flex;">
		      <button class="btn_style" @click="close()">取消</button>
		      <button class="btn_style" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">确认</button>
		    </view>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	import pop from "@/components/ming-pop/ming-pop.vue";
	import api from '@/request/api.js'
	import wxlogin from '@/common/wxlogin.js';
	export default {
		data() {
			return {
				useInfo: wx.getStorageSync('useInfo') || '',
				agree: false, // 协议勾选状态
				agreeValue:'',
				value:'',
				checked:false,
				openid:'',
				show:false,
			}
		},
		onLoad() {
			// uni.login({
			// 	success: res => {
			// 		// data.code作为参数传给给后台
			// 		console.log(res)
			// 		api.getSessionKey({
			// 			'js_code': res.code
			// 		}).then(res => {
			// 			console.log('登录信息接口返回:', res)
			// 			getApp().globalData.openid = res.data.openid
			// 			this.openid = res.data.openid
			// 		}).catch(err => {
			// 			console.log(err)
			// 		})
			// 	},
			// 	fail: err => {
			// 		console.log('uni.login 接口调用失败，将无法正常使用开放接口等服务', err)
			// 		reject(err)
			// 	}
			// })
		},
		methods: {
			// 授权登录
			getUserInfo() {
				wxlogin.wechatAppLogin()
			},
			// 手机号授权
			onGetPhoneNumber(e) {
				if (!this.agreeValue) {
				  uni.showModal({
				    title: '请勾选用户隐私协议',
				  })
				  return
				}
				console.log(e)
				this.getPhoneNumber(e)
			},
			/* 用户协议 */
			userAgreement() {
			  uni.navigateTo({
			    url: '/pages/agreement/user_agreement',
			  })
			},
			/* 隐私协议 */
			privacyAgreement() {
			  uni.navigateTo({
			    url: '/pages/agreement/privacy_agreement',
			  })
			},
			// 勾选同意协议
			onAgree(e) {
			  this.agreeValue=e.detail.value
			},
			Checked(){
				let check=this.checked
				if(check){
					this.checked=false
				}else{
					this.checked=true
				}
			},
			close(){
				this.show=false
			},
			// // 存本地用户缓存
			// setUserStorage(openid){
			// 	api.setUserInfo({
			// 		'openid': openid
			// 	}).then(res => {
			// 		console.log(res)
			// 		/* 存全局变量 */
			// 		getApp().globalData.nickName = res.data.nickname
			// 		getApp().globalData.avatarUrl = res.data.avatar
			// 		getApp().globalData.is_auth = res.data.is_auth
			// 		getApp().globalData.token = res.data.token
			// 		getApp().globalData.uid = res.data.uid
			// 		getApp().globalData.nft_address = res.data.nft_address
			// 		//将用户信息存入本地缓存
			// 		uni.setStorage({
			// 			key: 'userInfo',
			// 			data: {
			// 				'openid': openid,
			// 				'nickName': res.data.nickname,
			// 				'avatarUrl': res.data.avatar,
			// 				'token': res.data.token,
			// 				'is_auth': res.data.is_auth,
			// 				'uid': res.data.uid,
			// 				'mobile': res.data.mobile,
			// 				'update_time': res.data.update_time,
			// 				'nft_address': res.data.nft_address
			// 			},
			// 			complete: (res) => {
			// 				console.log(res)
			// 			}
			// 		});
			// 		/* 判断用户是否实名认证 */
					
			// 		/* 更改用户登陆状态 */
			// 		uni.setStorageSync('hasLogin',true)
					
			// 		/* 设置延迟返回首页 */
			// 		if(res.code==true){
			// 			/* 跳tabbar页面使用 */
			// 			// uni.switchTab({
			// 			// 	url:'/pages/index/index'
			// 			// })
			// 			if(res.data.mobile==null){
			// 				console.log(111)
			// 				this.show=true
			// 			}else{
			// 				uni.switchTab({
			// 					url:'../index/index'
			// 				})
			// 			}
			// 		}
				
			// 	}).catch(err => {
			// 		/* console.log(err) */
				
			// 	})
			// },
			// 获取手机号授权
			getPhoneNumber(event) {
				this.close()
				let that = this;
				let code = event.detail.code; //获取手机code
				console.log(code)
				//给后台返回解析手机号的code
				api.getPhone({
					'code':code
				}).then(res=>{
					console.log(res)
					let phone = res.data.phone_info.phoneNumber;
					uni.setStorageSync('phone',phone)
					if(res.code==200){
						/* 更改用户登陆状态 */
						wxlogin.wxLogin(phone)
						// uni.setStorage({
						// 	key:'hasLogin',
						// 	data:{
						// 		'hasLogin':true
						// 	}
						// })
						// uni.reLaunch({
						// 	url:'../index/index'
						// })
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
	
		background-color: #181816;
	}

	.big_logo {
		height: 300rpx;
		width: 300rpx;
		margin: 200rpx auto 0 auto;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.login_title {
		background-image: linear-gradient(-90deg, #f0c611 6%, #4effff 100%);
		background-clip: text;
		margin-top: 45rpx;
		text-align: center;
		letter-spacing: 3rpx;
		font-size: 45rpx;
		font-weight: bold;
		-webkit-background-clip: text;
		color: transparent;
	}
	.agreement{
		width: 85%;
		margin: auto;
		font-size: 26rpx;
		letter-spacing: 0rpx;
		color: #999999;
		padding: 40rpx 0;
		
		text {
		  color: #4effff;
		}
		
		.radio {
		  color: #ffffff;
		  font-family: PingFang-SC-Medium;
		  font-size: 26rpx;
		  line-height: 18rpx;
		  letter-spacing: 0rpx;
		  color: #999999;
		  width: 90%;
		  margin: auto;
		
		  a {
		    color: #ffffff;
		    width: 90%;
		    margin: auto;
		  }
		
		  /* radio 选中后的样式 */
		  uni-radio .uni-radio-input.uni-radio-input-checked {
		    background-color: #248067 !important;
		    border-color: #248067 !important;
		    background-clip: content-box !important;
		    padding: 5rpx !important;
		    box-sizing: border-box;
		  }
		
		  /* radio 选中后的图标样式*/
		  uni-radio .uni-radio-input.uni-radio-input-checked::before {
		    display: none !important;
		  }
		  
		  radio .wx-radio-input.wx-radio-input {
		  	background-color:#181816 !important;
		  	border-color:#fff;
		  	background-clip: content-box !important;
		  	box-sizing: border-box;
		  	height: 36rpx !important;
		  	width: 36rpx !important;
		  }
		  	radio .wx-radio-input.wx-radio-input-checked {
		  		background-color: #4effff !important;
		  		background-clip: content-box !important;
		  		border: 0 !important;
		  		box-sizing: border-box;
		  		height: 36rpx !important;
		  		width: 36rpx !important;
		  	}
		  
		  	/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
		  	radio .wx-radio-input.wx-radio-input-checked::before {
		  		/* 去除对号 */
		  		width: 36rpx !important;
		  		height: 36rpx !important;
		  		border-radius: 100%;
		  		background-color: #4effff;
		  	}
			
		}
	}
	.login_btn {
		width: 436rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin: 200rpx auto 0 auto;
		background-color: #09bb07;
		border-radius: 45rpx;

		button {
			width: 100%;
			height: 100%;
			line-height: 90rpx;
			margin: 200rpx auto 0 auto;
			color: #fff;
			background-color: #09bb07;
			border-radius: 45rpx;
		}
	}
	.edit_name {
	  .title {
	    margin-top: 40rpx;
	    text-align: center;
	  }
	  .used_name {
		width: 90%;
		margin: auto;
	    padding: 50rpx 0;
	    text-align: center;
		font-size: 28rpx;
	  }
	  .input {
	    width: 90%;
	    margin: 40rpx auto;
	    ::v-deep input {
	      text-align: center !important;
	    }
	  }
	}
	.btn {
	  display: flex;
	  .btn_style {
	    background-color: #242424;
	    border: 0;
	    color: #fff;
	    width: 50%;
	  }
	}
</style>
